<template>
  <div class="head" style="z-index: 10">
    <img
        src="/favicon.ico"
        alt="">
     <span style="font-size: 12px; color:black;font-weight: 700;margin-left:5px"> 星域VR</span>
    <div class="search" v-if="isSearch" @click="router.push('/search')">
      <span>搜索商品</span> <span>🔍</span>
    </div>
    <div class="nav" v-if="flag">
      <span @click="Go('/index')">首页</span>
      <span @click="Go('/service')">服务</span>
      <span @click="Go('/my')" style="width: 230px;text-align: start;color:#909399
"><div>当前用户：{{ qq }}</div>
        <div>积分余额：{{ score }} | 已兑换游戏：{{ size }} </div></span>
    </div>
    <div class="login" v-if="!flag" style="margin-right: 30px;" @click="router.push('/login')">
      登陆｜注册
    </div>
  </div>
  <div style="height: 70px"></div>

  <router-view  v-slot="{ Component }">
    <keep-alive>
      <component v-if="route.meta.keepAlive" :is="Component"/>
    </keep-alive>
    <component v-if="!route.meta.keepAlive" :is="Component"/>

  </router-view>
    <footer style="height: 50px;transform: translateY(-40px);font-size: 12px;color: #909399;text-align: center">陕ICP备2024047031号 </footer>
  <van-tabbar route class="btm">
    <van-tabbar-item replace to="/index" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item replace to="/online" icon="gem-o">在线</van-tabbar-item>
    <van-tabbar-item replace to="/my" icon="setting-o">我的</van-tabbar-item>
  </van-tabbar>

</template>


<script setup>
import {ref, onMounted, inject, computed} from 'vue';
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()
const axios = inject("axios")
const size = ref(0)
const path = route.path
const isSearch = ref(false)
const Go = (url) => {
  router.push(url)
}
const qq = ref('')
const score = ref('')
onMounted(() => {
  qq.value = window.localStorage.getItem("qq")
  flag.value = qq.value ? true : false
  if (route.path == '/index') isSearch.value = true
  if (flag.value) {
    axios.get("user/score?qq=" + qq.value).then(res => {
      score.value = res.data?.data
    }).catch(err => {
    })
    axios.get('record/count?qq=' + qq.value).then(res => {
      size.value = res.data?.data
    }).catch(er => {
    })
  }
})

const flag = ref(true)
</script>


<style scoped lang="less">
.search {
  width: 62vw;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px black solid;
  color: #A8ABB2;
  margin-left: 20px;
  padding: 10px;
  height: 25px;
  box-sizing: border-box;
}

.head {
  position: fixed;
  height: 70px;
  align-items: center;

  width: 100%;
  background-color: #ffffff;
  display: flex;
  border: 1px transparent solid;
}

@media screen and (max-width: 480px) {
  .nav,
  .login {
    display: none;
  }

  img {
    width: 30px;
    height: 30px;
  }

  .head {
    img {
      margin-left: 20px;
    }
  }
}
@media screen and(min-width: 480px) {
  .btm {
    display: none;
  }

  .head {
    img {
      width: 30px;
      height: 30px;
      margin-left: 20px;
    }


    .nav {
      font-size: 14px;
      display: flex;
      align-items: center;
      font-weight: 700;

      span {
        margin-right: 20px;
      }
    }

    .login {
      color: #909399;
      font-size: 14px;
    }
  }
}
.btm {
  position: fixed;
  bottom: 0;
}
</style>